﻿@page
@using EShopOnAbp.PublicWeb.Components.Basket
@model EShopOnAbp.PublicWeb.Pages.Catalog
@{
    const int productsColumnSize = 2;
}

@section styles{
    <abp-style src="/Pages/Catalog.css"/>
}
@section scripts {
    <abp-script src="/client-proxies/basket-proxy.js" />
    <abp-script src="/Pages/Catalog.cshtml.js" />
}
<div class="row">
    <div class="col-lg-9">
        <h3 class="pt-5 pb-4 text-center">Our Products</h3>
        <div class="product-list">
            @for (int i = 0; i < Math.Ceiling(Model.Products.Count / (double)productsColumnSize); i++)
            {
                <abp-row>
                    @for (int j = 0; j < productsColumnSize; j++)
                    {
                        <abp-column size-lg="_6" size-sm="_12">
                            @if ((i * productsColumnSize) + j < Model.Products.Count)
                            {
                                var product = Model.Products[(i * productsColumnSize) + j];
                                <div class="product-list-item" data-product-id="@product.Id.ToString()">
                                    @if (!product.ImageName.IsNullOrEmpty())
                                    {
                                        <img src="/product-images/@product.ImageName"/>
                                    }
                                    else
                                    {
                                        <img src="/product-images/noimage.jpg"/>
                                    }
                                    <div class="row mt-5">
                                        <div class="col">
                                            <div class="product-info-box">
                                                <h6>@product.Name</h6>
                                                <em class="d-block text-muted">@product.Code - Stock count: @product.StockCount</em>
                                            </div>
                                        </div>
                                        <div class="col-auto text-right text-danger">
                                            <strong class="product-price">$@product.Price</strong>
                                        </div>
                                    </div>
                                </div>
                            }
                        </abp-column>
                    }
                </abp-row>
            }
        </div>
    </div>
    <div class="col-lg-3">
        <h3 class="pt-5 pb-4 text-center">Your Basket</h3>
        <div id="BasketArea">
            @await Component.InvokeAsync(typeof(BasketWidgetViewComponent))
        </div>
    </div>
</div>